<template>
  <div class="sidebar-section">
    <h3>评分筛选</h3>
    <div
        class="filter-group"
        v-for="rating in ratings"
        :key="rating.id"
    >
      <label>
        <input
            type="checkbox"
            :value="rating.id"
            v-model="selectedRatings"
        > {{ rating.name }}
      </label>
    </div>
    <button
        class="submit-btn"
        style="width:100%; margin-top:10px;"
        @click="applyFilter"
    >
      确定
    </button>
  </div>
</template>

<script>
import { ref, defineEmits } from 'vue'

export default {
  setup(props, { emit }) {
    const selectedRatings = ref([])

    const ratings = ref([
      { id: '5', name: '5星' },
      { id: '4', name: '4星以上' },
      { id: '3', name: '3星以上' }
    ])

    const applyFilter = () => {
      emit('rating-filter-applied', selectedRatings.value)
    }

    return {
      ratings,
      selectedRatings,
      applyFilter
    }
  }
}
</script>

<style scoped>
.sidebar-section {
  margin-bottom: 25px;
}

.sidebar-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #212529;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.filter-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>